<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="author" content="计科2411-32-赵红云">
    <title>CSS样式</title>
    <style>
        div {
            background-color: cyan;
            width: 200px;
            height: 100px;
        }

        span {
            background-color: cyan;
            width: 200px;
            height: 100px;
        }

        /* 页面效果和设想拿给我完全不一样，原因是div与span的元素类型不同：
        div是块级元素，会独占一行，能正常显示宽高，背景色；
        span是行内元素，不会换行，不会独占一行，且无法设置宽高，只能显示背景色。 */
    </style>
</head>

<body>
    <div class="c1">1</div>
    <div class="c1">2</div>
    <span class="c1">3</span>
    <span class="c1">2</span>
</body>

</html>